<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>学生信息管理系统</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
</head>

<style>
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }
</style>
<body>
<h6>管理员用户：<%= request.getSession().getAttribute("user") %></h6>
<div class="container" style="text-align: center">
    <h2>学生信息管理系统</h2>
    <button class="btn btn-info" data-toggle="modal" data-target="#modalAdd">
        新增
    </button>
    <button class="btn btn-danger" id="deleteRows">
        删除
    </button>
    <button class="btn btn-info" id="editRows">
        编辑
    </button>
    <button class="btn btn-warning" id="showAll">
        全部
    </button>
    <button class="btn btn-default" id="logout">
        退出
    </button>
</div>

<table class="table">
    <thead>
    <tr>
        <th>序号</th>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>出生日期</th>
        <th>邮箱</th>
        <th>备注</th>
    </tr>
    </thead>
    <tbody>

    <%-- 循环输出表的每一行 jstl --%>
    <c:forEach items="${pb.list}" var="student" varStatus="s">
        <tr>
            <td><input class="checkbox" type="checkbox"></td>
            <td class="tdId">${student.id}</td>
            <td class="tdName">${student.name}</td>
            <td class="tdGender">${student.gender}</td>
            <td class="tdBirthday">${student.birthday}</td>
            <td class="tdEmail">${student.email}</td>
            <td class="tdComment">${student.comment}</td>
        </tr>
    </c:forEach>
    </tbody>
</table>

<%-- 定义常量 --%>
<c:set var="defaultRows" value="5"/>
<c:set var="defaultParams"
        value="rows=${defaultRows}&id=${condition.id}&name=${condition.name}&gender=${condition.gender}&birthday=${condition.birthday}&email=${condition.email}&comment=${condition.comment}"/>

<div class="container" style="text-align: center">
    <p>共 ${pb.totalCount} 条记录</p>
    <ul class="pagination">
        <li class="previous">
            <%-- 判断是否是第一页，如果是则不配置上一页跳转 --%>
            <c:if test="${pb.currentPage <= 1}">
                <a href="javascript:return false;" class="disabled" style="text-align: center">
            </c:if>
            <c:if test="${pb.currentPage > 1}">
                <a href="${pageContext.request.contextPath}/getUserByPage?currentPage=${pb.currentPage - 1}&${defaultParams}">
            </c:if>
                    《
                </a>
        </li>

        <%-- 循环输出每个页码 --%>
        <c:forEach begin="1" end="${pb.totalPage}" var="i">
            <%-- 如果是当前页则显示选中效果 --%>
            <c:if test="${pb.currentPage == i}"><li class="active"></c:if>
            <c:if test="${pb.currentPage != i}"><li></c:if>
            <a href="${pageContext.request.contextPath}/getUserByPage?currentPage=${i}&${defaultParams}">
                ${i}
            </a>
        </li>
        </c:forEach>

        <li class="next">
            <%-- 判断是否是最后一页，如果是则不配置上一页跳转 --%>
            <c:if test="${pb.currentPage < pb.totalPage}">
                <a href="${pageContext.request.contextPath}/getUserByPage?currentPage=${pb.currentPage + 1}&${defaultParams}">
                </c:if>
                <c:if test="${pb.currentPage >= pb.totalPage}">
                    <a href="javascript:return false;" class="disabled">
                    </c:if>
                    》
                </a>
        </li>
    </ul>
</div>

<%-- 按条件查询 --%>
<div class="container form-bg">
    <form class="form-horizontal" action="getUserByPage" method="post">
        <hr>
        <div class="form-group"><button type="submit" class="btn">查询</button></div>
        <div class="form-group"><label>学号：
            <input type="number" placeholder="输入学号" name="id" value="${condition.id}">
        </label></div>
        <div class="form-group"><label>姓名：
            <input type="text" placeholder="输入姓名" name="name" value="${condition.name}">
        </label></div>
        <div class="form-group"><label>性别：
            <input type="text" placeholder="输入性别" name="gender" value="${condition.gender}">
        </label></div>
        <div class="form-group"><label>邮箱：
            <input type="email" placeholder="输入邮箱" name="email" value="${condition.email}">
        </label></div>
        <div class="form-group"><label>备注：
            <input type="text" placeholder="输入备注" name="comment" value="${condition.comment}">
        </label></div>
        <div class="form-group"><label>生日：
            <input type="date" name="birthday" value="${condition.birthday}">
        </label></div>
        <hr>
    </form>
</div>

<%-- 新增表格 模态框 --%>
<div class="modal" id="modalAdd" data-backdrop="static">
    <%-- 窗口声明 --%>
    <div class="modal-dialog">
        <%-- 内容声明 --%>
        <div class="modal-content">
            <%-- 框的标题 --%>
            <div class="modal-header">
                <button class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
                <h4 class="modal-title">新同学</h4>
            </div>
                <%--框内信息--%>
            <div class="modal-body">
                <label>学号</label>
                <input class="form-control" type="number" name="studentId" onchange="checkIdBeforeAdd()"  required>
                <p id="studentIdExistMark">学号已存在</p>
                <hr>
                <label>姓名</label>
                <input class="form-control" type="text" name="studentName" required>
                <hr>
                <label>性别</label>
                <div>
                    <label class="radio-inline">
                        <input type="radio" name="studentGender" value="男" checked>男
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="studentGender" value="女">女
                    </label>
                </div>
                <hr>
                <label>出生日期</label>
                <div><input class="date" type="date" name="studentBirthday" required></div>
                <hr>
                <label>邮箱</label>
                <input class="form-control" type="email" name="studentEmail" required>
                <hr>
                <label>备注</label>
                <input class="form-control" type="text" name="studentComment" required>
            </div>
            <%-- 框的按钮 --%>
            <div class="modal-footer">
                <button class="btn btn-info" id="addRow">
                    确定
                </button>
                <button class="btn btn-default" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>
</body>

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>

</html>
